<template>
    <h3>简单值</h3>
    <p>{{ id }}</p>
    <p>{{ name }}</p>
    <p>{{ salary }}</p>
    <p>{{ status }}</p>
    <p>{{ 123 }}</p>
    <h3>对象</h3>
    <p>{{ user.id }}--{{ user.username }}--{{ user.password }}</p>
    <p>{{ emp.id }}--{{ emp.name }}--{{ emp.salary }}--{{ emp.gender }}</p>
    <button @click="f1">ref测试</button>
    <button @click="f2">reactive测试</button>
    <h3>数组</h3>
    <p>{{ hobbies[0] }}--{{ hobbies[1] }}--{{ hobbies[2] }}</p>
    <h3>使用JS内置对象</h3>
    <p>{{ new Date() }}</p>
    <p>{{ Math.random() }}</p>
</template>
<script setup>
import { reactive, ref } from 'vue';
const id = ref(1)
const name = ref("admin")
const salary = ref(8000.0)
const status = ref(true)
// 使用大括号表示对象,类似于JSON语法
const user = ref({ id, username: "admin", password: "123456" })
// 通过ref定义的对象可以修改数据
user.value = { id:"2", username: "admin", password: "123456" }
const emp = reactive({ id, name, salary, gender: "男" })
// 通过reactive定义的对象不能修改数据
// emp = { id: 2, salary, gender: "女" }
// 数组使用中括号表示
const hobbies = ref(["吃饭","睡觉","打豆豆"])

function f1() {
    console.log(user.value.id)
}
function f2() {
    console.log(emp.id)
}
</script>